﻿<!DOCTYPE html>
<html>
	<head>
		<title>Fix size test</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Fix size test" />
		<meta name="keywords" content="javascript, dynamic, grid, layout"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>

		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
			}
			.freewall .brick {
				display: block;
		        border:1px solid #333;
		    }
			.freewall img {
				width: 100%;
			}
			.freewall .medium {
				width: 125px;
				height: 125px;
			}
			.freewall .large {
				width: 267px;
				height: 267px;
			}
		   .freewall.x-large {
				width: 554px;
				height: 554px;
			}
		</style>
	</head>
	<body>

		<div class="freewall">
			<a href="#" class="brick x-large" data-fixSize="0" ><img src="http://placekitten.com/g/554/554" alt="" /></a>
		    <a href="#" class="brick large"><img src="http://placekitten.com/g/267/267" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		    <a href="#" class="brick medium"><img src="http://placekitten.com/g/125/125" alt="" /></a>
		</div>


		<script type="text/javascript">
			var wall = new Freewall('.freewall');
			var start = new Date().getTime();
			wall.reset({
	            selector: '.brick',
	            animate: true,
	            gutterX: 15,
	            gutterY: 15,
	            cellW: 125,
	            cellH: 125,
	            onResize: function() {
	                wall.fitWidth();
	            },
	            onComplete: function() {
					console.log("Showup", new Date().getTime() - start);
				}
		    });

			wall.addCustomEvent("onGridReady", function(container, setting) {
				start = new Date().getTime();
			});

			wall.addCustomEvent("onGridArrange", function(container, setting) {
				console.log("Arrange", new Date().getTime() - start);
				start = new Date().getTime();
			});


			$(function() {

				var images = wall.container.find('.brick');
				images.find('img').load(function() {
					wall.fitWidth();
				});

			});

		</script>
	</body>
</html>
